<!DOCTYPE html>
<html>
<head>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d890b1f16fb364253e79c5bb20225c3a";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


    

    

    
<!-- Baidu Tongji -->
<script>var _hmt = _hmt || []</script>
<script async src="//hm.baidu.com/hm.js?busuanzi_value_site_uv"></script>
<!-- End Baidu Tongji -->




    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="FYMCShbUK8" />
    <meta name="baidu-site-verification" content="ZYRF7OxQRW" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    
    
    <link rel="canonical" href="https://hhardyy.com/2018/01/19/post、get和ajax跨域/">
    
    
    <title>post、get和ajax跨域 | 小方块 - hhardyy.com | 复杂的坑+归其原理+了解实现规则===解决？解决成功：加油解决成功;</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#958e93">
    
    
    <meta name="keywords" content="proxy,post,get,eval,JSON.parse(),B/S的交互,HTTP协议,ajax,跨域,服务器代理">
    <meta name="description" content="做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。">
<meta name="keywords" content="proxy,post,get,eval,JSON.parse(),B&#x2F;S的交互,HTTP协议,ajax,跨域,服务器代理">
<meta property="og:type" content="article">
<meta property="og:title" content="post、get和ajax跨域">
<meta property="og:url" content="http://yoursite.com/2018/01/19/post、get和ajax跨域/index.html">
<meta property="og:site_name" content="小方块 - hhardyy.com">
<meta property="og:description" content="做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/images/post_and_get/1.jpg">
<meta property="og:image" content="http://yoursite.com/images/post_and_get/3.jpg">
<meta property="og:image" content="http://yoursite.com/images/post_and_get/5.jpg">
<meta property="og:updated_time" content="2020-01-13T15:21:34.170Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="post、get和ajax跨域">
<meta name="twitter:description" content="做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。">
<meta name="twitter:image" content="http://yoursite.com/images/post_and_get/1.jpg">
    
        <link rel="alternate" type="application/atom+xml" title="小方块 - hhardyy.com" href="/atom.xml">
    
    <link rel="shortcut icon" href="/hardyfavicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/paulGraham.jpg)">
      <div class="brand" style="background-color:#4154b2">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">BingZhenhuang</h5>
          <a href="mailto:huangbingzhen@hhardyy.com" title="huangbingzhen@hhardyy.com" class="mail">huangbingzhen@hhardyy.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                所有文章
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/HHardyy" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://juejin.im/user/59a26f926fb9a02487553b04"  >
                <i class="icon icon-lg icon-pencil"></i>
                掘金-圳
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://segmentfault.com/u/hhardyy"  >
                <i class="icon icon-lg icon-comments"></i>
                Segmentfault
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://codepen.io/HHardyy/" target="_blank" >
                <i class="icon icon-lg icon-codepen"></i>
                Codepen
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/ZhenSolive/find.html" target="_blank" >
                <i class="icon icon-lg icon-globe"></i>
                原生直播间
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/hero/judge.html" target="_blank" >
                <i class="icon icon-lg icon-cloud"></i>
                原生小悟空
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/airPlay/HHardyy_PC.html" target="_blank" >
                <i class="icon icon-lg icon-camera"></i>
                原生飞机大战（PC）
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://www.freecodecamp.cn/hhardyy" target="_blank" >
                <i class="icon icon-lg icon-leaf"></i>
                Freecodecamp
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/友情链接"  >
                <i class="icon icon-lg icon-link"></i>
                友链
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">post、get和ajax跨域</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">post、get和ajax跨域</h1>
        <h5 class="subtitle">
            
                <time datetime="2018-01-18T16:00:01.000Z" itemprop="datePublished" class="page-time">
  2018-01-19
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#get相对post的优势是什么"><span class="post-toc-number">1.</span> <span class="post-toc-text">get相对post的优势是什么</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#post和get的浏览器长度限制"><span class="post-toc-number">2.</span> <span class="post-toc-text">post和get的浏览器长度限制</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#post和get的安全性"><span class="post-toc-number">3.</span> <span class="post-toc-text">post和get的安全性</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#get幂等，post不幂等"><span class="post-toc-number">4.</span> <span class="post-toc-text">get幂等，post不幂等</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#用ajax时的get"><span class="post-toc-number">5.</span> <span class="post-toc-text">用ajax时的get</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#后端php接收："><span class="post-toc-number">6.</span> <span class="post-toc-text">后端php接收：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#get缓存问题解决方法："><span class="post-toc-number">7.</span> <span class="post-toc-text">get缓存问题解决方法：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#get提交中文乱码解决办法："><span class="post-toc-number">8.</span> <span class="post-toc-text">get提交中文乱码解决办法：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#用ajax时的post"><span class="post-toc-number">9.</span> <span class="post-toc-text">用ajax时的post</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#后端php接收：-1"><span class="post-toc-number">10.</span> <span class="post-toc-text">后端php接收：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#前端数据提交："><span class="post-toc-number">11.</span> <span class="post-toc-text">前端数据提交：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#ajax"><span class="post-toc-number">12.</span> <span class="post-toc-text">ajax</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#请求状态监控"><span class="post-toc-number">12.1.</span> <span class="post-toc-text">请求状态监控</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#返回数据的处理"><span class="post-toc-number">13.</span> <span class="post-toc-text">返回数据的处理</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#eval与JSON-parse详解"><span class="post-toc-number">13.1.</span> <span class="post-toc-text">eval与JSON.parse详解</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#跨域方案"><span class="post-toc-number">14.</span> <span class="post-toc-text">跨域方案</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#什么是跨域"><span class="post-toc-number">15.</span> <span class="post-toc-text">什么是跨域</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#解决跨域的方案"><span class="post-toc-number">16.</span> <span class="post-toc-text">解决跨域的方案</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#jsonp"><span class="post-toc-number">16.1.</span> <span class="post-toc-text">jsonp</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#服务器代理"><span class="post-toc-number">16.2.</span> <span class="post-toc-text">服务器代理</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#proxy中间件"><span class="post-toc-number">16.3.</span> <span class="post-toc-text">proxy中间件</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#更厉害的跨域方案"><span class="post-toc-number">17.</span> <span class="post-toc-text">更厉害的跨域方案</span></a></li></ol>
        </nav>
    </aside>
    
<article id="post-post、get和ajax跨域"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">post、get和ajax跨域</h1>
        <div class="post-meta">
            <time class="post-time" title="2018-01-19 00:00:01" datetime="2018-01-18T16:00:01.000Z"  itemprop="datePublished">2018-01-19</time>

            


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <p>做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。</p>
<p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=497047516&auto=0&height=66"></iframe><br><a id="more"></a></p>
<p>HTTP协议规定GET是获取资源的方法，POST是创建资源的方法，PUT是更新资源的方法，DELETE是删除资源的方法，PATCH是修改资源的方法。<br>一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。而GET一般用于获取/查询资源信息，POST一般用于更新资源信息。<br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/post_and_get/1.jpg" alt="“......”" title="">
                </div>
                <div class="image-caption">“......”</div>
            </figure></p>
<h3 id="get相对post的优势是什么"><a href="#get相对post的优势是什么" class="headerlink" title="get相对post的优势是什么"></a>get相对post的优势是什么</h3><p>GET的所有信息都在URL，也就是地址栏，所以很方便的被记录下来，<br>请求中的URL可以被存在各种地方，甚至被搜索引擎收录<br>数据比POST透明化一点，“方便大家都看得到”。</p>
<h3 id="post和get的浏览器长度限制"><a href="#post和get的浏览器长度限制" class="headerlink" title="post和get的浏览器长度限制"></a>post和get的浏览器长度限制</h3><p>get<br>get是通过URL提交数据，因此get可提交的数据量就受url的最大长度限制，HTTP协议对URL长度是没有限制的，限制URL长度多是浏览器或者服务器的配置参数。<br>post<br>HTTP协议也没有对POST进行限制，一般是受服务器配置限制或者内存大小。PHP下可以修改的配置来设置POST的大小（最初默认是8M）。</p>
<h3 id="post和get的安全性"><a href="#post和get的安全性" class="headerlink" title="post和get的安全性"></a>post和get的安全性</h3><p>post和get都是明文传输<br>1.get是通过URL方式请求，可以直接看到，可能会保存在Web的日志中,也可能会保存在浏览器历史记录以及缓存中。<br>2.post是通过请求header请求，可以通过开发者工具或者抓包看到。<br>所以该https的时候还是得https</p>
<h3 id="get幂等，post不幂等"><a href="#get幂等，post不幂等" class="headerlink" title="get幂等，post不幂等"></a>get幂等，post不幂等</h3><p>幂等意味着对同一URL的多个请求应该返回同样的结果。。<br>1.按照RFC规范，PUT，DELETE和安全方法都是幂等的，但服务端实现是否幂等是无法确保的。<br>2.引入幂等主要是为了处理同一个请求重复发送的情况，比如在请求响应前失去连接，如果方法是幂等的，就可以放心地重发一次请求。<br>3.get请求用于信息获取，由于是安全且幂等的。一般不容易产生副作用。它仅仅是获取资源信息，不会影响资源的状态。</p>
<p>post不幂等，可能改变服务器上的资源的请求。<br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/post_and_get/3.jpg" alt="“......”" title="">
                </div>
                <div class="image-caption">“......”</div>
            </figure></p>
<h3 id="用ajax时的get"><a href="#用ajax时的get" class="headerlink" title="用ajax时的get"></a>用ajax时的get</h3><p>get：<br>数据放在url<br>把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&amp;进行连接，然后把数据放到url?后面传到指定页面<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'get.php?username=hhardyy&amp;sex=man'</span>,<span class="literal">true</span>);</div></pre></td></tr></table></figure></p>
<p>(具体数据根据后端给的接口拼接，因为不同的需求需要的数据不一样)</p>
<h3 id="后端php接收："><a href="#后端php接收：" class="headerlink" title="后端php接收："></a>后端php接收：</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;?php</div><div class="line">header(<span class="string">'content-type:text/html;charset="utf-8"'</span>);</div><div class="line">error_reporting(<span class="number">0</span>);</div><div class="line">$username=$_GET[<span class="string">'username'</span>];</div><div class="line">$sex=$_GET[<span class="string">'sex'</span>];</div><div class="line">echo <span class="string">"你的名字:&#123;$username&#125;,性别:&#123;$sex&#125;"</span>;</div><div class="line">?&gt;</div></pre></td></tr></table></figure>
<p>此时如果将后端改成</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">echo <span class="string">"你好，你的名字:&#123;$username&#125;,性别:&#123;$sex&#125;"</span>;</div></pre></td></tr></table></figure>
<p>前端<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">alert(xhr.responseText);</div></pre></td></tr></table></figure></p>
<p>弹出的依旧是：你的名字:hhardyy,性别:man”；而不会弹出你好,你的名字:hhardyy,性别:man</p>
<p>原因就是缓存的问题，重新提交一次数据，由于url地址一样，它会读出缓存里面的而不是读出服务器里面，</p>
<h3 id="get缓存问题解决方法："><a href="#get缓存问题解决方法：" class="headerlink" title="get缓存问题解决方法："></a>get缓存问题解决方法：</h3><p>在url?后面接上一个随机数或者时间戳，防止每次url一样<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'get.php?username=hhardyy&amp;sex=man&amp;'</span>+ <span class="keyword">new</span> <span class="built_in">Date</span>().getTime(),<span class="literal">true</span>);</div></pre></td></tr></table></figure></p>
<h3 id="get提交中文乱码解决办法："><a href="#get提交中文乱码解决办法：" class="headerlink" title="get提交中文乱码解决办法："></a>get提交中文乱码解决办法：</h3><p>编码encodeURI()<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">xhr.open(<span class="string">'get'</span>,<span class="string">'get.php?username='</span>+圳+<span class="string">'&amp;sex=man&amp;'</span>+ <span class="keyword">new</span> <span class="built_in">Date</span>().getTime(),<span class="literal">true</span>);<span class="regexp">/弹出中文乱码</span></div><div class="line"><span class="regexp">xhr.open('get','get.php?username='+encodeURI('圳')+'&amp;sex=man&amp;'+ new Date().getTime(),true);/</span>正常</div></pre></td></tr></table></figure></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/post_and_get/5.jpg" alt="“......”" title="">
                </div>
                <div class="image-caption">“......”</div>
            </figure>
<h3 id="用ajax时的post"><a href="#用ajax时的post" class="headerlink" title="用ajax时的post"></a>用ajax时的post</h3><p>post：<br>数据放在send方法里面<br>enctype:提交的数据格式，默认application/x-www-form-urlencoded”application/x-www-form-urlencoded”&gt;<br>意思是根据url进行编码，也可以进行二进制编码等，后端拿到之后解码就可以拿到数据了</p>
<h3 id="后端php接收：-1"><a href="#后端php接收：-1" class="headerlink" title="后端php接收："></a>后端php接收：</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;?php</div><div class="line">header(<span class="string">'content-type:text/html;charset="utf-8"'</span>);</div><div class="line">error_reporting(<span class="number">0</span>);</div><div class="line">$username=$_POST[<span class="string">'username'</span>];</div><div class="line">$sex=$_POST[<span class="string">'sex'</span>];</div><div class="line">echo <span class="string">"你的名字:&#123;$username&#125;,性别:&#123;$sex&#125;"</span>;</div><div class="line">?&gt;</div></pre></td></tr></table></figure>
<h3 id="前端数据提交："><a href="#前端数据提交：" class="headerlink" title="前端数据提交："></a>前端数据提交：</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">xhr.open(<span class="string">'post'</span>,<span class="string">'post.php'</span>,<span class="literal">true</span>);</div><div class="line"></div><div class="line">xhr.setRequestHeader(<span class="string">'content-type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);</div><div class="line">（声明发送的数据类型application/x-www-form-urlencoded）</div><div class="line">xhr.send(<span class="string">'username=hhardyy&amp;sex=18'</span>);</div></pre></td></tr></table></figure>
<p>post提交数据没有缓存问题</p>
<p>post中文编码没问题<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">xhr.send(<span class="string">'username=圳&amp;sex=18'</span>);</div></pre></td></tr></table></figure></p>
<p>因为已经声明了发送的数据类型urlencoded，所以它自动进行url编码。</p>
<h3 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h3><p>“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），节省用户操作时间，提高用户体验，减少数据请求传输获取数据等等，比传统网页刷新需要整页刷新更帅一筹，比如注册页面，<br>传统网页需要填完所有信息然后点击注册按钮之后，填错的地方才给出警告，而ajax不同，可以在输入文本框，比如用户名的时候通过焦点事件向后台发送ajax异步请求，当你输入完用户名想输入密码的<br>时候，网页就会提示用户名是否已经被注册，或者合不合法，比传统填完一大串信息最后爆出一个符号错误又得回去修改整页的感觉nice好多。</p>
<h4 id="请求状态监控"><a href="#请求状态监控" class="headerlink" title="请求状态监控"></a>请求状态监控</h4><p>onreadystatechange（目前已经不推荐使用了，建议用load），理由呢，我写分别写出来，拿get来举例<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">	<span class="keyword">if</span> (xhr.readyState == <span class="number">4</span>) &#123;</div><div class="line">		<span class="keyword">if</span> (xhr.status == <span class="number">200</span>) &#123;</div><div class="line">			alert(xhr.responseText);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">xhr.open(<span class="string">'get'</span>, <span class="string">'url'</span>, <span class="literal">true</span>);</div><div class="line">xhr.send();</div><div class="line"></div><div class="line">各种请求状态的情况</div><div class="line"><span class="number">0</span>	（初始化）还没有调用open()方法</div><div class="line"><span class="number">1</span>	（载入）已调用send()方法，正在发送请求</div><div class="line"><span class="number">2</span>	（载入完成）send()方法完成，已收到全部响应内容</div><div class="line"><span class="number">3</span>	（解析）正在解析响应内容</div><div class="line"><span class="number">4</span>	（完成）响应内容解析完成，可以在客户端调用了</div></pre></td></tr></table></figure></p>
<p>load<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">xhr.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;	</div><div class="line">	alert(xhr.responseText);</div><div class="line">&#125;</div><div class="line">xhr.open(<span class="string">'get'</span>, <span class="string">'url'</span>, <span class="literal">true</span>);</div><div class="line">xhr.send();</div></pre></td></tr></table></figure></p>
<p>responseText：返回以文本形式存放的内容<br>responseXML：返回XML形式的内容</p>
<h3 id="返回数据的处理"><a href="#返回数据的处理" class="headerlink" title="返回数据的处理"></a>返回数据的处理</h3><p>特别提醒一下，假如要解析JSON的时候需要注意，因为有Eval和JSON.parse两种方法将字符串解析成对象，两者的区别就是Eval属于饥不择食的那种，什么都转，所以不是特别安全，假如一些恶意代码什么的它也会正常解析，这就不太和谐了，所以一般推荐JSON.parse()来将字符串转成对象。</p>
<h4 id="eval与JSON-parse详解"><a href="#eval与JSON-parse详解" class="headerlink" title="eval与JSON.parse详解"></a>eval与JSON.parse详解</h4><p>eval:可以解析任何字符串变成js（缺点：什么都能解析，比如植入的一些病毒，木马什么的，它也会解析）<br>parse:只能解析json形式的字符串，json必须是严格模式的json，也就是key和value都要加引号（安全性高一些，对数据来说尽量用它）<br>另外还有个新东西stringify()<br>stringify(json)(将json转换成字符串，转成严格模式的字符串),也可以用于对对象的克隆和引用,就像这样<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=&#123;</div><div class="line">    name:<span class="string">"hhardyy"</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> b=a;</div><div class="line">b.name=<span class="string">"xiaofangkuai"</span>；</div><div class="line"><span class="built_in">console</span>.log（a.name）<span class="comment">//xiaofangkuai</span></div></pre></td></tr></table></figure></p>
<p>很明显对象a的属性被影响了，用浅拷贝来解决问题<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=&#123;</div><div class="line">    name:<span class="string">"hhardyy"</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> b=&#123;&#125;</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> attr <span class="keyword">in</span> a)&#123;</div><div class="line">   b[attr]=a[attr];</div><div class="line">&#125;</div><div class="line">b.name=<span class="string">"xiaofangkuai"</span></div><div class="line"><span class="built_in">console</span>.log（a.name）<span class="comment">//hhardyy</span></div></pre></td></tr></table></figure></p>
<p>这样虽然，互不影响了但是这个只是浅拷贝，假如a的属性里面是多个json值就得用递归一层一层….显然不是特别厉害，厉害的解决方案是深拷贝，也就是新方法登场的时候<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=&#123;</div><div class="line">    name:&#123;<span class="attr">age</span>:<span class="number">100</span>&#125;</div><div class="line">&#125;;</div><div class="line"><span class="keyword">var</span> str=<span class="built_in">JSON</span>.stringify(a);</div><div class="line"><span class="keyword">var</span> b=<span class="built_in">JSON</span>.parse(str);</div><div class="line">b.name.age=<span class="number">200</span>;</div><div class="line"><span class="built_in">console</span>.log(a.name.age)<span class="comment">//100</span></div></pre></td></tr></table></figure></p>
<p>但是IE6、7不兼容，兼容的方法也简单，勉强用evel或者去<a href="http://www.json.org/" target="_blank" rel="external">json的官网</a>下载json类下面的json2.js，然后引入,就可以兼容了</p>
<h3 id="跨域方案"><a href="#跨域方案" class="headerlink" title="跨域方案"></a>跨域方案</h3><p>既然ajax涉及了交互请求，那么就分成当前域名下和其他域名下，也就是请求地址，请求同一地址下面的数据，可以不用跨域，假设一个域名下的文件请求另外一个域名下的资源，就产生了跨域，提到跨域都会想到jsonp解决。</p>
<h3 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h3><p>指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器施加的安全限制<br>所谓同源是指：域名、协议、端口号均相同。</p>
<h3 id="解决跨域的方案"><a href="#解决跨域的方案" class="headerlink" title="解决跨域的方案"></a>解决跨域的方案</h3><p>1、JSONP：动态插入javascript标签（浏览器对SRC属性没有同源限制），但是要注意JSONP只支持GET请求，不支持POST请求<br>2、代理：通过服务器来发送请求，然后将请求的结果返回给前端<br>3、XHR2：全称“XMLHttpRequest Level2”是HTML5提供的方法，对跨域访问提供了很好的支持<br>4、中间件proxy<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">header(<span class="string">'Access-Control-Allow-Origin:*'</span>)<span class="comment">//允许所有来源访问</span></div><div class="line">header(<span class="string">'Access-Control-Allow-Method:POST,GET'</span>)<span class="comment">//允许访问的方式</span></div></pre></td></tr></table></figure></p>
<h4 id="jsonp"><a href="#jsonp" class="headerlink" title="jsonp"></a>jsonp</h4><p>全称json padding，jsonp实现跨域的原理和script标签加载的差不多，用script标签加载资源是没有跨域问题的，在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情，然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去。<br>就是像这样：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oScript = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</div><div class="line">oScript.src = <span class="string">'getData.php'</span>;</div><div class="line"><span class="built_in">document</span>.body.appendChild(oScript);</div></pre></td></tr></table></figure></p>
<p>可以利用这个原理将函数封装成按需加载的样子,然后写一个函数func(data)，就可以在func里头对数据data进行操作<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oScript = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</div><div class="line">oScript.src = <span class="string">'getData.php?callback=func'</span>;</div><div class="line"><span class="built_in">document</span>.body.appendChild(oScript);</div></pre></td></tr></table></figure></p>
<h4 id="服务器代理"><a href="#服务器代理" class="headerlink" title="服务器代理"></a>服务器代理</h4><p>举例node<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> https=<span class="built_in">require</span>(<span class="string">'https'</span>)</div><div class="line"><span class="keyword">const</span> server=https.createServer(<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</div><div class="line">    https.get(<span class="string">'xxxxxx.com'</span>,(resp)=&gt;&#123;</div><div class="line">        <span class="keyword">let</span> data=<span class="string">""</span></div><div class="line">        <span class="comment">//数据到达</span></div><div class="line">        resp.on(<span class="string">'data'</span>,chunk=&gt;&#123;</div><div class="line">            data+=chunk</div><div class="line">        &#125;)</div><div class="line">        <span class="comment">//结束</span></div><div class="line">        resp.on(<span class="string">'end'</span>,()=&gt;&#123;</div><div class="line">            res.writeHead(<span class="number">200</span>,&#123;</div><div class="line">                <span class="string">'Content_Type'</span>:<span class="string">'application/json;charset=utf-8'</span></div><div class="line">            &#125;)</div><div class="line">            res.end(data)<span class="comment">//输出data</span></div><div class="line">        &#125;)</div><div class="line">    &#125;)</div><div class="line">&#125;)</div><div class="line">server.listen(<span class="number">666666</span>)</div></pre></td></tr></table></figure></p>
<h4 id="proxy中间件"><a href="#proxy中间件" class="headerlink" title="proxy中间件"></a>proxy中间件</h4><p>举例express<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> app=express()</div><div class="line"><span class="keyword">const</span> proxy=<span class="built_in">require</span>(<span class="string">'http-proxy-middleware'</span>)<span class="comment">//单线程的跨域中间件，用于连接，快速和浏览器同步</span></div><div class="line"></div><div class="line">app.use(<span class="string">'/'</span>,proxy(&#123;      <span class="comment">// '/'限定中间件的使用范围</span></div><div class="line">	target:<span class="string">'xxxxx.com'</span>,</div><div class="line">	pathRewrite:&#123;</div><div class="line">	    <span class="string">'^/'</span>:<span class="string">''</span>          <span class="comment">// '^/mock':'/mock'</span></div><div class="line">	&#125;,</div><div class="line">	changeOrigin:<span class="literal">true</span>    <span class="comment">// 允许跨域</span></div><div class="line">&#125;))</div><div class="line">app.listen(<span class="number">66666</span>)</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'start'</span>)</div></pre></td></tr></table></figure></p>
<h3 id="更厉害的跨域方案"><a href="#更厉害的跨域方案" class="headerlink" title="更厉害的跨域方案"></a>更厉害的跨域方案</h3><p>就是后端的一些配合，在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以直接跨域了。前提是服务器端设置请求头，例如xxx.php中：header(“xxx:协议+域名”),既然提到了新特性，就要提到咱们的IE同志，因为IE如果想实现跨域请求，则需要使用另一个对象去实现，那就是xDomainRequest，而不是兼容XMLHttpRequest，写法看下面<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> oXDomainRequest=<span class="keyword">new</span> XDmainRequest();</div><div class="line">oXDomainRequest.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">   alert(<span class="keyword">this</span>.responseText);</div><div class="line">&#125;</div><div class="line">oXDomainRequest.open(<span class="string">'get'</span>,<span class="string">'url'</span>,<span class="literal">true</span>);</div><div class="line">oXDomainRequest.send();</div></pre></td></tr></table></figure></p>
<p>封装了一个ajax<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">method, url, data, success</span>) </span>&#123;</div><div class="line">	<span class="keyword">var</span> xhr = <span class="literal">null</span>;</div><div class="line">	<span class="keyword">try</span> &#123;</div><div class="line">		xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">	&#125; <span class="keyword">catch</span> (e) &#123;</div><div class="line">		xhr = <span class="keyword">new</span> ActiveXObject(<span class="string">'Microsoft.XMLHTTP'</span>);</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	<span class="keyword">if</span> (method == <span class="string">'get'</span> &amp;&amp; data) &#123;</div><div class="line">		url += <span class="string">'?'</span> + data;</div><div class="line">	&#125;</div><div class="line">	</div><div class="line">	xhr.open(method,url,<span class="literal">true</span>);</div><div class="line">	<span class="keyword">if</span> (method == <span class="string">'get'</span>) &#123;</div><div class="line">		xhr.send();</div><div class="line">	&#125; <span class="keyword">else</span> &#123;</div><div class="line">		xhr.setRequestHeader(<span class="string">'content-type'</span>, <span class="string">'application/x-www-form-urlencoded'</span>);</div><div class="line">		xhr.send(data);</div><div class="line">	&#125;</div><div class="line">	xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span> ( xhr.readyState == <span class="number">4</span> ) &#123;</div><div class="line">			<span class="keyword">if</span> ( xhr.status == <span class="number">200</span> ) &#123;</div><div class="line">				success &amp;&amp; success(xhr.responseText);</div><div class="line">			&#125; <span class="keyword">else</span> &#123;</div><div class="line">				alert(<span class="string">'出错了,Err：'</span> + xhr.status);</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2020-01-13T15:21:34.170Z" itemprop="dateUpdated">2020-01-13 23:21:34</time>
</span><br>


        
        谢谢浏览，我会继续努力的，示例：<a href="/2018/01/19/post、get和ajax跨域/" target="_blank" rel="external">http://yoursite.com/2018/01/19/post、get和ajax跨域/</a>
        
    </div>
    <footer>
        <a href="http://yoursite.com">
            <img src="/img/avatar.jpg" alt="BingZhenhuang">
            BingZhenhuang
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/B-S的交互/">B/S的交互</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTTP协议/">HTTP协议</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JSON-parse/">JSON.parse()</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ajax/">ajax</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/eval/">eval</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/get/">get</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/post/">post</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/proxy/">proxy</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/服务器代理/">服务器代理</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/跨域/">跨域</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&title=《post、get和ajax跨域》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&title=《post、get和ajax跨域》 — 小方块 - hhardyy.com&source=做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。
" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/01/19/post、get和ajax跨域/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《post、get和ajax跨域》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2018/02/02/js中的事件冒泡/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">js中的事件冒泡</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2018/01/18/H5的艺术/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">H5的艺术</h4>
      </a>
    </div>
  
</nav>



    














</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        🤠 请我喝可乐！
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content" style="width:50%">
        
        <div class="reward-code" style="text-align:center">
            <div style="width:300px;margin:0px auto;">
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/alipay.jpg" alt="支付宝打赏二维码">
               <span style="display:inline-block; margin-bottom:20px;">0.88(支付宝 aliPay)</span>
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/wechat.jpg" alt="微信打赏二维码">
               <span style="display:inline-block;">0.88(微信 weChat)</span>
            </div>
        </div>
    </div>
</div>



</div>

        <script>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }</script>
<script type="text/javascript" language="javascript">
    function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2017, 08, 18, 11, 42, 23)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = 'Running：' + currentTime[0] + '年 ' + currentTime[1] + '天 '
                + currentTime[2] + '时 ' + currentTime[3] + '分 ' + currentTime[4]
                + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }    setInterval(setTime, 1000);
</script>
<footer class="footer">
    <div class="top">
        

        <p>
          <span id="busuanzi_container_page_pv">
             [&nbsp;浏览量：&nbsp;<span id="busuanzi_value_page_pv"></span>&nbsp;]
          </span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>BingZhenhuang &copy; 2017 - 2020</span>
            <span>
                
                Power by <a href="https://hhardyy.github.io/" target="_blank">zhen On August 8</a> 
            </span>
            <span id="htmer_time" "></span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&title=《post、get和ajax跨域》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&title=《post、get和ajax跨域》 — 小方块 - hhardyy.com&source=做Web的需求一定会涉及到浏览器和服务器的交互，也就是B/S，B/S的交互又是通过HTTP协议，而post和get是HTTP协议中的两种方法。
" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/01/19/post、get和ajax跨域/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《post、get和ajax跨域》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/01/19/post、get和ajax跨域/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/01/19/post、get和ajax跨域/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>








<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(•‾̑⌣‾̑•)✧˖°回来看我';
            clearTimeout(titleTime);
        } else {
            document.title = '(゜-゜)つロ欢迎回来';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
